{% extends 'base.html' %}
{% load static from staticfiles %}
{% load mptt_tags %}





{% block body %}
    <div class="layui-tab" lay-filter="test1">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="111">文章列表</li>
            <li lay-id="222">发送信息</li>
            <li lay-id="333">权限分配</li>
            <li lay-id="444">审核</li>
            <li lay-id="555">订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">1</div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
        </div>
    </div>


    <button onclick="add()">添加</button>
    <script>


        layui.use('element', function () {
            var element = layui.element;

            //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
            var layid = location.hash.replace(/^#test1=/, '');
            element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项



        });

        function add() {
            var element = layui.element;
            element.tabAdd('test1', {
                title: '选项卡的标题'
                , content: '选项卡的内容' //支持传入html
                , id: 'menu_page'
            });
var has = '{{ path }}/' + $(this).children('').attr('title');
                console.log(has)
                element.tabChange('test1', has);
            //监听Tab切换，以改变地址hash值
            element.on('tab(test1)', function () {
                var has = '{{ path }}/' + $(this).children('').attr('title');
                console.log(has)
                element.tabChange('test1', has);

            });
        }
    </script>
{% endblock %}